<!-- 客户管理 -->
<template>
  <div style="padding: 10px">
    <div class="client">
      <!-- 头部 -->
      <el-row>
        <el-col :span="24" class="client_head">
          <el-button type="primary" @click="clientAddFn">添加客户</el-button>
          <div class="client_head_right">
            <!-- 选择经济 -->
            <div class="client_choose">
              <el-dropdown>
                <span class="el-dropdown-link">
                  全部经济<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>全部经济</el-dropdown-item>
                  <el-dropdown-item>狮子头</el-dropdown-item>
                  <el-dropdown-item>螺蛳粉</el-dropdown-item>
                  <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                  <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <!-- 筛选按钮 -->
            <el-input />
            <el-button>筛选</el-button>
          </div></el-col>
      </el-row>
      <!-- 表格 -->
      <el-row style="margin-top: 20px">
        <el-col :span="24">
          <el-table border style="width: 100%">
            <el-table-column label="日期" width="180" />
            <el-table-column label="姓名" width="180" />
            <el-table-column label="地址" />
          </el-table>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <!-- 分页组件 -->
        <el-pagination background layout="prev, pager, next" :total="1000" />
      </el-row>
    </div>
    <addClient :dialog-visible="dialogVisible" @handleCloseFn="handleCloseFn" />
  </div>
</template>

<script>
import addClient from './components/add-client.vue'
export default {
  components: { addClient },
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    // 模态框
    clientAddFn() {
      this.dialogVisible = true // 弹出模态框
    },
    handleCloseFn() {
      this.dialogVisible = false // 关闭模态框
    }
  }
}
</script>

<style scoped>
.client {
  padding: 10px;
  border: 1px solid rgb(234, 232, 232);
}
.client_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.client_choose {
  width: 350px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 1px solid #000;
  border: 1px solid rgb(234, 232, 232);
}
.el-dropdown {
  display: flex;
  justify-content: space-between;
}
.client_head_right {
  display: flex;
}
</style>
